{include file="public/layout" /}
<body class="laytp-container">
<div id="search-form">
  <blockquote class="layui-elem-quote">一级菜单最多三个，二级菜单最多五个</blockquote>
</div>
<div class="layui-card">
  <div class="layui-card-body">
    <table class="layui-hide" id="tree_tabledata" lay-filter="tree_tabledata"></table>
  </div>
</div>
<script type="text/html" id="TPL-treeTable-demo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" onclick="closeall()">
      全部展开/关闭
    </button>
    <button class="layui-btn layui-btn-sm" onclick="reload()">
      刷新
    </button>
<!--    <button class="layui-btn layui-btn-sm" onclick="add()">-->
<!--      新增-->
<!--    </button>-->
  </div>
</script>
<script type="text/html" id="TPL-treeTable-demo-tools">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<!--    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>-->
<!--    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>-->
  </div>
</script>
<script type="text/html" id="barDemo">
  <div class="layui-clear-space">
<!--    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
    <!--        <a class="layui-btn layui-btn-xs" lay-event="recharge">充值</a>-->
<!--    <a class="layui-btn layui-btn-xs" lay-event="more">-->
<!--      更多-->
<!--      <i class="layui-icon layui-icon-down"></i>-->
<!--    </a>-->
  </div>
</script>
<script>
  var tableIns
  var datawhere = {};
  var treeTable = '';
  layui.use(function(){
    treeTable = layui.treeTable;
    var layer = layui.layer;
    var dropdown = layui.dropdown;
    // 渲染
    tableIns = treeTable.render({
      elem: '#tree_tabledata',
      url: '{:url("index")}', // 此处为静态模拟数据，实际使用时需换成真实接口
      tree: {
        // 异步加载子节点
        // async: {
        //   enable: true,
        //   url: '{:url("menu")}', // 此处为静态模拟数据，实际使用时需换成真实接口
        //   autoParam: ["pid=id"]
        // },
        view:{
          //iconLeaf:'<i class="layui-icon layui-icon-subtraction"></i>',
          iconLeaf:'',
        },
      },
      height: 'full-100', // 最大高度减去其他容器已占有的高度差
      //maxHeight: '501px',
      toolbar: '#TPL-treeTable-demo',
      cols: [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
        {field: 'name', title: '分类名称'},
        {fixed: 'right', title:'操作', width: 134, minWidth: 125,  templet: '<div><button class="layui-btn layui-btn-sm" onclick="choosecategory(\'{{d.id}}\')">选择</button></div>'}
      ]],
      page: true
    });
    // 表头工具栏工具事件
    treeTable.on("toolbar(tree_tabledata)", function (obj) {
      var config = obj.config;
      var tableId = config.id;
      var status = treeTable.checkStatus(tableId);
      // 获取选中行
      if (obj.event === "getChecked") {
        if(!status.data.length) return layer.msg('无选中数据');
        console.log(status);
        layer.alert("当前数据选中已经输出到控制台，<br>您可按 F12 从控制台中查看结果。");
      }
    });
  });
  var flag = true
  function closeall(){
    if(flag){
      treeTable.expandAll('tree_tabledata', true); // 关闭全部节点
      flag = false;
    }else{
      treeTable.expandAll('tree_tabledata', false); // 关闭全部节点
      flag = true;
    }
  }
  function reload(){
    treeTable.reload('tree_tabledata')
  }
  function choosecategory(id){
    var index = layer.load();
    $.post("{:url('choosecategory')}",{id:id},function(res){
      layer.close(index);
      var data = res.data;
      window.parent.chooseCategory(data.id,data.name,"{$Request.param.args}");
      var index = parent.layer.getFrameIndex(window.name);
      parent.layer.close(index);
    });
  }
</script>
</body>
</html>